<template>
  <div class="total-box">
    <!-- 搜索 -->
    <div class="section1">
      <div class="section1-1">
        <i class="el-icon-search" @click="sousuo"></i>
        <input
          type="text"
          placeholder="请输入用户名查询"
          v-model="filterText"
          class="input1"
          @input="textNone1($event)"
          @keyup.enter="textNone($event)"
        />
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="table-content">
      <el-table :data="tableData" border>
        <el-table-column prop="user_id" label="用户编号"></el-table-column>
        <el-table-column prop="user_name" label="微信用户名"></el-table-column>
        <el-table-column prop="invite_code" label="邀请码"></el-table-column>
        <el-table-column
          prop="user_creattime"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="user_last_login_time"
          label="最后一次登录时间"
        ></el-table-column>
        <el-table-column prop="user_phone" label="手机号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="modify(scope.row)"
                  >编辑</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 点击出现添加的模态框 -->
      <el-dialog
        title="用户基本信息"
        :visible.sync="dialogFormVisible"
        width="600px"
      >
        <el-form :model="form">
          <!-- 头像 -->
          <div class="touxiangdiv">
            <div class="touxiang">
              <el-upload
                class="avatar-uploader"
                action="http://192.168.43.75/WashMachine/tuxiangdizhi"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-camera-solid"></i>
              </el-upload>
            </div>
          </div>
          <el-form-item
            label="用户编号"
            :label-width="formLabelWidth"
            class="from-item"
          >
            <el-input
              :value="form.user_id"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            class="from-item"
          >
            <el-input v-model="form.user_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="邀请码"
            :label-width="formLabelWidth"
            class="from-item"
          >
            <el-input
              :value="form.invite_code"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            class="from-item"
          >
            <el-input v-model="form.user_phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="queding">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageNum"
        layout="prev, pager, next, jumper"
        :total="drugList"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      filterText: '',
      tableData: [],
      currentPage: 1,
      pageNum: 6,
      drugList: 0,
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      // 图片上传
      imageUrl: '',
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.form.user_icon = res;
    },
    queding() {
      this.dialogFormVisible = false;
      console.log(this.$route.params.houseid);
      this.form.pages = this.currentPage;
      this.form.pageSize = this.pageNum;
      this.form.inquire = this.filterText;
      http.userChange(this.form).then((r) => {
        console.log(r);
        this.tableData = r.data.data;
      });
    },

    //绑定输入框值改变事件
    textNone(e) {
      console.log(e);
      this.getData(this.value);
    },
    //绑定回车键事件
    textNone1(e) {
      if (e.target.value == '') {
        this.currentPage = 1;
        this.getData(this.value);
      }
    },
    modify(row) {
      console.log(row);
      this.form = row;
      this.imageUrl = row.user_icon;
      this.dialogFormVisible = true;
    },
    sousuo() {
      console.log(1111);
    },
    //获取数据
    getData() {
      http
        .userBaselData({
          params: {
            pages: this.currentPage,
            pageSize: 6,
            inquire: this.filterText,
          },
        })
        .then((r) => {
          console.log(r);
          this.drugList = r.data.counts;
          this.tableData = r.data.data;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
};
</script>
<style scoped>
.table-content {
  margin-top: 50px;
}
.section1-1 {
  width: 190px;
  height: 40px;
  border: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  background-color: white;
  align-items: center;
}
.input1 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
  outline: none;
}
.paging {
  margin-top: 30px;
  margin-left: 30%;
  position: absolute;
  left: 190px;
  bottom: 60px;
}

.el-pagination >>> .el-pagination__jump {
  font-size: 17px;
}
.el-pagination >>> .el-icon {
  font-size: 17px;
}
.el-pagination >>> .number {
  font-size: 17px;
  width: 60px;
}
/* 模态框css */
.touxiangdiv {
  height: 260px;
}
.touxiang {
  position: relative;
  top: 5%;
  left: 35%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgb(235, 235, 235);
  /* background: url(../../static/img/02.jpg)no-repeat 4px 5px; */
}
/* -----------图片上传----------- */
.touxiang i {
  position: relative;
  top: -10px;
  left: -15px;
}
.touxiang >>> .el-icon-camera-solid {
  font-size: 45px;
  color: #8d8585;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  /* border: 1px dashed #d9d9d9; */
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.from-item {
  position: relative;
  left: -5%;
}
.total-box {
  background-color: white;
  padding-top: 30px;
  margin-top: 10px;
  height: 600px;
}
</style>